<template>
  <view class="waterfall-grid">
    <view class="column">
      <view
        v-for="item in leftList"
        :key="item.id"
        class="waterfall-item"
      >
        <image
          :src="item.image"
          mode="widthFix"
          style="width: 100%"
        ></image>
        <view class="item-content">
          <text class="item-title">{{ item.title }}</text>
          <view class="item-tags">
            <text class="tag">{{ item.height }}cm</text>
            <text class="tag">{{ item.weight }}KG</text>
            <text class="tag">{{ item.constellation }}</text>
          </view>
          <view class="item-footer">
            <view class="user-info">
              <image :src="item.avatar" class="item-avatar"></image>
              <text class="item-name">{{ item.name }}</text>
            </view>
            <button class="appointment-button" @click="navigateToDetail">预约</button>
          </view>
        </view>
      </view>
    </view>
    <view class="column">
      <view
        v-for="item in rightList"
        :key="item.id"
        class="waterfall-item"
      >
        <image
          :src="item.image"
          mode="widthFix"
          style="width: 100%"
        ></image>
        <view class="item-content">
          <text class="item-title">{{ item.title }}</text>
          <view class="item-tags">
            <text class="tag">{{ item.height }}cm</text>
            <text class="tag">{{ item.weight }}KG</text>
            <text class="tag">{{ item.constellation }}</text>
          </view>
          <view class="item-footer">
            <view class="user-info">
              <image :src="item.avatar" class="item-avatar"></image>
              <text class="item-name">{{ item.name }}</text>
            </view>
            <button class="appointment-button" @click="navigateToDetail">预约</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

const navigateToDetail = () => {
  uni.navigateTo({
    url: '/pages/companion-profile/index'
  });
};

// 瀑布流
const list = ref([
  {
    image: "/static/images/fall1.jpg",
    title: "荔枝",
    height: 163,
    weight: 55,
    constellation: "天秤座",
    avatar: "/static/images/avatar1.jpg",
    name: "荔枝",
  },
  {
    image: "/static/images/fall2.jpg",
    title: "小顾",
    height: 165,
    weight: 98,
    constellation: "双鱼座",
    avatar: "/static/images/avatar2.jpg",
    name: "小顾",
  },
  {
    image: "/static/images/fall3.jpg",
    title: "周末探店",
    height: 170,
    weight: 58,
    constellation: "射手座",
    avatar: "/static/images/avatar3.jpg",
    name: "桃子",
  },
  {
    image: "/static/images/fall4.jpg",
    title: "海边的风",
    height: 168,
    weight: 52,
    constellation: "白羊座",
    avatar: "/static/images/avatar4.jpg",
    name: "佳佳",
  },
]);

const leftList = ref<any[]>([]);
const rightList = ref<any[]>([]);

// 手动计算瀑布流的左右两列数据
const calculateWaterfall = () => {
  const left: any[] = [];
  const right: any[] = [];
  list.value.forEach((item: any, index: number) => {
    if (index % 2 === 0) {
      left.push(item);
    } else {
      right.push(item);
    }
  });
  leftList.value = left;
  rightList.value = right;
};

// 在组件挂载时计算一次
onMounted(() => {
  calculateWaterfall();
});
</script>

<style lang="scss" scoped>
.waterfall-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 15px;
}

.waterfall-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.item-content {
  padding: 10px;
}

.item-title {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.item-footer {
  display: flex;
  align-items: center;
  margin-top: 8px;
  justify-content: space-between;
}

.item-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

.item-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
}

.tag {
  background-color: #f3f4f6;
  color: #666;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  margin-bottom: 6px;
}

.user-info {
  display: flex;
  align-items: center;
}

.item-name {
  font-size: 12px;
  color: #666;
}

.appointment-button {
  background-color: #ffde58;
  color: #333;
  font-size: 12px;
  font-weight: bold;
  border: none;
  border-radius: 15px;
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  margin: 0;
}
</style>
